<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="mystyle.css">
</head>
<body>
    <h1>This is a heading</h1>
    <img src="c:/Users/北京第一深情/Desktop/软测/样本1.jpg" alt="" width="100" height="140">
    <!-- <p>因为图像元素设置了 z-index 属性值为 -1, 所以它会显示在文字之后。</p> -->

    <div class="sticky">粘性</div>

    <div class="translate"></div>
    
    <h2>position:static</h2>
    <p>使用position:static;定位的元素,无特殊定位,遵循正常的文档流 对象</p>
    <div class="static">该元素使用了position:static;</div>

    <p class="pos_fixed">Some more text</p>
    <p><b>注意:</b>IE7 和 IE8 支持只有一个 !DOCTYPE 指定固定值.</p>
    <p>Some text</p>
    <p>Some text</p>
    <p>Some text</p>
    <p>Some text</p>
    <p>Some text</p>
    <p>Some text</p>
    <p>Some text</p>
    <p>Some text</p>
    <p>Some text</p>
    <p>Some text</p>

    <h2>这是位于正常位置的标题</h2>
    <h2 class="pos_ledt">这个标题相对于其正常位置向左移动</h2>
    <h2 class="pos_right">这个标题相对于其正常位置向右移动</h2>

    

     <!-- 选中后会变样式的表格 -->

    <li>
        <ul style="background-color: rgb(72, 154, 72);">主页</ul>
        <ul>新闻</ul>
        <ul>联系</ul>
        <ul>关于</ul>
    </li>
    <div class="change_color1"  >主页</div>
    <div class="change_color2" style="border: 1px;width: 300px;height: 30px;">新闻</div>
    <div class="change_color3" style="border: 1px;width: 300px;height: 30px;">联系</div>
    <div class="change_color4" style="border: 1px;width: 300px;height: 30px;">关于</div>
    <div class="change_color5" style="border: 1px;width: 300px;height: 70px;">
        <p class="zhuye" style="border: 1px;height: 30px;width: 30px;">主页</p>
        <p class="xinwen" style="border: 1px;width: 30px;height: 30px;">新闻</p>
        <p class="lianxi" style="border: 1px;width: 30px;height: 30px;">联系</p>
        <p class="guanyu" style="border: 1px;width: 30px;height: 30px;">关于</p>
    </div>
    <style>
        .change_color1{
            border: 1px solid;
            width: 300px;
            height: 30px;
            background-color: green;
        }
        .change_color1:hover{
            background: greenyellow;
            border: 1px solid;
            width: 300px;
            height: 30px;

        }
        .change_color2{
            background-color: aliceblue;

        }
        .change_color2:hover{
            background-color: rgb(142, 135, 148);
            color: aliceblue;
        }
        .change_color3{
            background-color: aliceblue;
        }
        .change_color3:hover{
            background-color: rgb(142, 135, 148);
            color: aliceblue;
        }
        .change_color4{
            background-color: aliceblue;
        }
        .change_color4:hover{
            background-color:rgb(142, 135, 148);
            color: aliceblue;
        }
        .change_color5{
            display: flex;
            background-color: rgb(31, 26, 26);
        }
        .zhuye{
            color: rgb(150, 164, 176);
        }
        .xinwen{
            color: rgb(150, 164, 176);
        }
        .lianxi{
            color: rgb(150, 164, 176);
        }
        .guanyu{
            color: rgb(150, 164, 176);
        }
        .zhuye:hover{
            background-color: rgb(23, 123, 205);
            color: white;
        }
        .xinwen:hover{
            background-color: rgb(23, 123, 205);
            color: white;
        }
        .lianxi:hover{
            background-color:rgb(23, 123, 205) ;
            color: white;
        }
        .guanyu:hover{
            background-color: rgb(23, 123, 205);
            color: white;
        }
        /* 粘性定位在最顶端 */
        .sticky{
            position: sticky;
            position: -webkit-sticky;
            top: 0;
            padding: 5px;
            background-color: aqua;
            border: 2px solid red;
        }
        
    </style>
</body>
</html>